<template>
	<view class="box">
		<view class="geren_top">
			<view class="container">
				<image src="../../../static/userH.png" mode="" class="userHead"></image>
			</view>
			<view class="gren_top_name">
				<text class="name">{{data.name}}</text>
				<view class="zhiwei">
					<text>{{data.deparent}}</text>
					<text>{{data.zhiwei}}</text>
				</view>
			</view>
			<view class="geren_bottom">
				<image src="../../../static/phone.png" mode=""></image>
				<image src="../../../static/message.png" mode=""></image>
				<image src="../../../static/letter.png" mode=""></image>
			</view>
		</view>
		<view class="bottom">
			<text class="tou">基本信息</text>
			<ul>
				<li>
					<text class="color">性别 </text>
					<text class="dataT">{{data.sex}}</text>
				</li>
				<li>
					<text class="color">生日</text>
					<text class="dataT">{{data.birthday}}</text>
				</li>
				<li>
					<text class="color">邮箱</text>
					<text class="dataT">{{data.email}}</text>
				</li>
				<li>
					<text class="color">手机</text>
					<text class="dataT">{{data.phone}}</text>
				</li>
				<li>
					<text class="color">微信</text>
					<text class="dataT">{{data.wxhao}}</text>
				</li>
				<li>
					<text class="color">座机/分机</text>
					<text class="dataT">{{data.linePhone}}</text>
				</li>
			</ul>
			<text class="tou">基本信息</text>
			<ul>
				<li>
					<text class="color">工号</text>
					<text class="dataT">{{data.workNumber}}</text>
				</li>
				<li>
					<text class="color">籍贯</text>
					<text class="dataT">{{data.Origin}}</text>
				</li>
				<li>
					<text class="color">毕业院校</text>
					<text class="dataT">{{data.schoolEnd}}</text>
				</li>
				<li>
					<text class="color">毕业时间</text>
					<text class="dataT">{{data.endTime}}</text>
				</li>
				<li>
					<text class="color">学历</text>
					<text class="dataT">{{data.Degree}}</text>
				</li>
				<li>
					<text class="color">所学专业</text>
					<text class="dataT">{{data.grade}}</text>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				data:[]
			}
		},
		methods: {
			
		},
		onLoad(option){
			this.data=JSON.parse(option.data)
			 console.log(this.data)
		}
	}
</script>

<style scoped>
	.dataT{
		width: 150px;
	}
	.bottom>ul>li>text{
		margin-left: 30px;
	}
	.bottom>ul>li>text:nth-child(2){
		margin-left: 80px;
		width: 220px;
		text-align: center;
	}
	.color{
		color: rgb(149, 149, 149);
	}
	.tou{
		display: inline-block;
		height: 50px;
		width: 100%;
		border-bottom: 1px solid rgb(242, 242, 242);
		background-color: rgb(249, 249, 249);
		color: rgb(149, 149, 149);
		line-height: 50px;
		margin-left: 30px;
		font-size: 12px;
		}
	.bottom>ul>li{
		display: inline-block;
		height: 50px;
		width: 100%;
		border-bottom: 1px solid rgb(242, 242, 242);
		background-color: white;
	/* 	margin-left: 20px; */
		line-height:50px;
	}
	.box{
		background-color: rgb(249, 249, 249);
	}
	.bottom{
		width: 100%;
		height: auto;
	}
	.geren_bottom>image{
		width:50px;
		height: 50px;
		margin-left: 25px;
	}
	.geren_bottom{
		width: 225px;
		height: 50px;
		margin: 0 auto;
		margin-top: 20px;
	}
	.zhiwei>text{
		margin-left:5px;
		line-height: 30px;
		color: white;
	}
	.name{
		color: white;
		font-size: 22px;
		font-weight: bold;
	}
	.gren_top_name{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;  
		margin-top: 20px;
	}
	.container{
		display: flex;
		justify-content: center;
		align-items: center;  
		

	}
	.userHead{
		width:80px;
		height: 80px;
		margin-top: 30px;
	}
	.geren_top{
		width: 100%;
		height: 300px;
		background-color: rgba(228, 228, 228);
	}
</style>
